<template>
	<view style="padding: 0 15rpx;">
		<uni-swipe-action>
			<uni-swipe-action-item
			 v-for="(item,index) in list" :key="index">
				<view class="flex py-2 px-1 align-center border-bottom" @tap="open(item.id)">
					<image :src="item.cover+'/small'" mode="aspectFill" class="rounded-lg mx-2 flex-shrink"
						style="width: 250rpx; height: 160rpx;"></image>
					<view class="flex-1">
						<view class="text-ellipsis-2 font mb-1 pr-1">{{item.title}}</view>
						<view class="font-sm text-light-muted mb-1">{{$Time.gettime(item.created_time)}}</view>
						<view class="flex text-light-muted mb-1 justify-between align-center">
							<view class="flex align-center">
								<text class="iconfont iconbofangshu font-md mr-1"></text>
								<text class="font-sm">{{$Time.getCounts(item.play_count)}}</text>
								<text class="iconfont icondanmushu font-md mx-1"></text>
								<text class="font-sm">{{$Time.getCounts(item.danmu_count)}}</text>
							</view>
							<text class="ml-1 font-sm text-danger font-weight-bold">{{item.status===1?'':(item.status===0?'待审核':'已禁用')}}</text>
							<text class="iconfont icongengduo"></text>
						</view>
					</view>
				</view>
				<template v-slot:right>
					<view class="flex align-center justify-center" style="width: 180rpx; background-color: #DD524D;"
					@click="unFavorite($event,item.id)">
						<text class="text-white font-sm">取消收藏</text>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- 上拉加载更多 -->
		<view class="flex align-center justify-center font text-secondary" style="height: 50px;" hover-class="bg-light">{{loadText}}</view>
	</view>
</template>

<script>
	// 引入vuex的 mapState
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				options1: [{
					text: '取消收藏'
				}],
				page:1,
				loadText:'下拉加载更多',
				list:[]
			}
		},
		computed:{
			...mapState({
				user: state => state.user
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.loadText = '下拉加载更多'
			this.getData().finally(()=> {
				uni.stopPullDownRefresh();
			});
		},
		// 触底加载更多
		onReachBottom() {
			this.page++;
			this.getData();
		},
		onLoad() {
			this.getData(false);
		},
		methods: {
			open(id){
				uni.navigateTo({
					url:'../video-detail/video-detail?id='+id
				})
			},
			// 取消关注
			unFavorite(e,video_id){
				//console.log('点击取消：'+JSON.stringify(e)+JSON.stringify(item))
				uni.showModal({
					title:'确定删除吗？',
					success: (r) => {
						if(r.confirm){
							this.$H.post('/unfava',{video_id},{token:true}).then(res=>{
								uni.showToast({
									title:'取消关注成功',
									icon:'none'
								});
								// this.page = 1;
								// this.getData(false);
								let index = this.list.findIndex(item=>{
									return item.id === video_id 
								})
								if(index > -1){
									this.list.splice(index,1);
								}
							}).catch(err=>{
								uni.showToast({
									title:JSON.stringify(err),
									icon:'none'
								});
								this.getData(false);
							})
						}
					}
				})
			},
			//获取专注列表
			getData(showToast=true){
				let url = `/fava_list/${this.page}?user_id=${this.user.id}`
				//console.log('url=',url);
				return this.$H.get(url).then(res=>{
					// 需要将所有cover，加上服务器地址
					res.forEach(item=>{
						item.cover = this.$H.common.sourceUrl + item.cover; 
					})
					if(showToast){
						uni.showToast({
							title:'数据获取成功',
							icon:'none'
						});
					}
					if(this.page > 1){
						if(res.length > 0){
							this.list = [...this.list, ...res];
						} else {
							this.page--;
							this.loadText = '我是有底线的'
							if(showToast){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
							}
						}
					} else {
						this.list = res;
					}
				}).catch(err=>{
					console.log(JSON.stringify(err));
					if(this.page > 1){
						this.page--;
					}
				});
			}
		}
	}
</script>

<style>

</style>
